import React, { Component } from 'react';
import './topics.scss';
import Nav from '@/components/common/nav';
import { Route, Switch, Redirect} from 'react-router-dom';
import Newest from '@/components/topics/Newest';
import Popular from '@/components/topics/Popular';
import Topic_right from '@/components/topics/child/Topic_right';
import Topic_nav from '@/components/topics/child/Topic_nav';
import { BackTop } from 'antd';
import './Feidian.scss';
class Com extends Component {
    constructor (props) {
        super(props);
        this.state = {
            list:[
                {
                    path: '/topic/newest',
                    name: '最新'
                },
                {
                    path: '/topic/popular',
                    name: '热门'
                }
            ]
        }
    }
    componentDidMount(){
        fetch('http://localhost:3001/api/test/profile')
        .then(res => res.json())
        .then(data =>{
            data=data.lists
            localStorage.setItem('topic',JSON.stringify(data))
        })
    }

    render () {
      
        return(
            
            <div className="topicBox">
                    <div className='container'>
                    <Nav />
                    </div>
                    <div className='sendtexts'>
                    <div className='sendtxts'>
                        {/* <i className='iconfont icon-x-copy' onClick={ this.out.bind(this) }></i> */}
                        <div className='txt-title'>
                            <span>发沸点</span>
                        </div>
                        <div className='txt' >
                        <div className='txt-cont' contentEditable="true" spellCheck="false" placeholder="发布动态...">
                        </div>
                        </div>
                        <div className='toolbar-ico'>
                            <ul>
                                <li><i className='iconfont icon-biaoqing'></i><span>表情</span></li>
                                <li><i className='iconfont icon-tupian'></i><span>图片</span></li>
                                <li><i className='iconfont icon-lianjie'></i><span>连接</span></li>
                                <li><i className='iconfont icon-huati'></i><span>话题</span></li>
                            </ul>
                            <button className='publish'>发布</button>
                        </div>
                        
                    </div>
                </div>
                <div className='topic-box'>
                    <Topic_nav />
                    <Topic_right />

                <Switch>
                    <Route path="/topic/newest" component ={ Newest }/>
                    <Route path="/topic/popular" component ={ Popular }/>
                    <Route path="/topic/topic_right" component ={ Topic_right }/>
                    <Route path="/topic/topic_nav" component ={ Topic_nav }/>
                    <Redirect from = "/topic" to="/topic/popular"/>
                </Switch>
               </div>
                <div>
                    <BackTop>
                        <div className="ant-back-top-inner" title="回到顶部">^</div>
                    </BackTop>
                </div>
                
                
            </div>
        )
    }
}
export default Com;